<template>
  <div class="not-found">
    <div class="img-svg">
      <img :src="svg" alt="" style="width: 100%; height: 100%" />
    </div>
    <div>
      <div class="title">
        <icons name="i-caution" size="24" :fill="activeColor" />
        {{ tips }}
      </div>
      <p style="color: gray; font-size: 16px">可能的错误原因：</p>
      <div class="description">
        {{ description }}
        <p>如有疑问，请联系管理员</p>
      </div>
      <p>
        <span :style="{ color: activeColor }">{{ second }} 秒</span>
        后自动返回首页
      </p>
      <p>
        <n-button round @click="backToHome" type="info">立即返回</n-button>
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup name="notFound">
  import { useRouter } from 'vue-router'
  // import { getIconColor } from '@/hooks'
  import { getActivateColor } from '@/hooks'
  import svg from '@/assets/colourSvg/404.svg'

  defineProps({
    tips: {
      type: String,
      default: '您访问的页面不存在'
    },
    description: {
      type: String,
      default: '地址输入错误或者该链接已经失效'
    }
  })

  const router = useRouter()
  // const fill = getIconColor()
  const { color: activeColor } = getActivateColor()

  const second = ref(5)
  const time = setInterval(() => {
    if (second.value > 0) {
      second.value--
    } else {
      backToHome()
    }
  }, 1000)
  /**
   * @description: 返回首页
   * @return {*}
   */
  const backToHome = (): void => {
    clearInterval(time)
    router.push('/home')
  }

  // 销毁计时器
  onUnmounted(() => {
    clearInterval(time)
  })
</script>

<style lang="less" scoped>
  .not-found {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: @background-color-gray;
    .img-svg {
      min-height: 200px;
      width: 400px;
    }
    .title {
      font-size: 20px;
      color: var(--primary-color);
      margin-bottom: 20px;
    }
    .description {
      color: gray;
    }
  }
</style>
